<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/index.js"
import { checkname, checkpass } from "../util/util.js";
import { useRouter } from 'vue-router'

const formRef = ref({})
const change = ref({})
const router = useRouter()

onMounted(() => {
    console.log("Component has been mounted.");
});

//确认密码的验证
var validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
        // password 是表单上绑定的字段
    } else if (value !== change.value.password) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

//表单验证
const rules = reactive({
    username: [{ validator: checkname, trigger: "blur" }],
    password: [{ validator: checkpass, trigger: "blur" }],
    confirmPass: [{ validator: validatePass2, trigger: "blur" }]
})

const editSave = async function () {
    formRef.value.validate(
        async (valid) => {
            if (valid) {
                let info = ref({});
                info.value.username = change.value.username;
                info.value.password = change.value.oldPass;
                let result = await api.get("api/changecheck", info.value);
                if (result.code == 200) {
                    await api.putjson("/api/change", change.value);
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    });
                    setTimeout(function () { router.push({ path: '/park' }); }, 500);
                }
                else {
                    ElMessage({
                        type: 'error',
                        message: '用户名和原密码不一致',
                    });
                }
            } else {
                console.log("修改失败");
            }
        }
    )
}
</script>
<template>
    <div class="container">
        <el-form :rules="rules" :model="change" class="loginRoot" ref="formRef">
            <h3 class="loginTitle">重置密码</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="change.username" auto-complete="off" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="change.oldPass" auto-complete="off" placeholder="原密码" show-password/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="change.password" auto-complete="off" placeholder="新密码" show-password/>
            </el-form-item>
            <el-form-item prop="confirmPass">
                <el-input type="password" v-model="change.confirmPass" auto-complete="off" placeholder="确认新密码" show-password/>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="editSave">确认修改</el-button>
        </el-form>
    </div>
</template>
<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 让容器高度填满整个页面 */
}

.loginRoot {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 50px auto;
    width: 350px;
    padding: 15px 35px;
    background: rgba(240, 248, 255, 0.5);
    /* Semi-transparent white */
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #c6c6c6;
}

.loginTitle {
    margin: 15px auto 20px auto;
    text-align: center;
    color: #505050;
}
</style>